<template>
  <div>
    <pull-to :top-load-method="refresh" :bottom-load-method="refresha">
      <div class="list_boxa">
        <div v-if="arr===false||arr==''">
          <li class="list_wu">
              <div class="wu">
                <img src="../img/back.png" alt="" class="bga"><br>
              </div><br>
              <div class="wu_wz">
                <div class="wz">
                  <span>还没有其他销售购买您的长期广告位！</span>
                  <span>客源量过少，销售价格过高，</span>
                  <span>都可能造成广告位滞销！</span>
                </div>
              </div>
          </li>
        </div>

        <div v-else>

          <div class="list" v-for="(item,index) in this.arr" :key="index" >
            <a class="haha" :href="'yqlh://BDetail_user_id='+item.userInfo.user_id">

            </a>
            <img :src="item.userInfo.avatar_head" class="buy_photo">
            <div class="box">
                <span class="buy_name">{{item.userInfo.nickname}}</span>
                <div class="buy_trade">
                    <span class="hang">{{item.userInfo.storeInfo.industry_name}}</span>
                </div>
            </div>
            <span class="buy_company">{{item.userInfo.storeInfo.store_name}}</span>
            <span class="buy_people">拥有客源量：<span>{{item.userInfo.myc}}人</span></span>
            <span class="buy_juli">距离: {{item.km}}</span>
            <span class="buy_price">￥{{item.orderInfo.payprice}}</span>
            <div class="buy_time">{{time(item.end_time)}} 到期</div>
            <div class="btnn">
              <a  :href="'yqlh://user_id='+item.userInfo.user_id+'&nickname='+item.userInfo.nickname+'&headimg='+item.userInfo.avatar_head+'&relation_status=3'+'&relation_type=3'">
                  <div class="btnna">和他沟通</div>
              </a>
              <a v-if="item.click==2" :href="'yqlh://user_id='+item.userInfo.user_id+'&nickname='+item.userInfo.nickname+'&headimg='+item.userInfo.avatar_head+'&relation_type=2'+'&click=1'">
                  <div class="btnnb">客源互推</div>
              </a>
              <div v-else-if="item.click==0">
                  <div class="btnnb">请求中</div>
              </div>
              <div v-else-if="item.click==1">
                  <div class="btnnb">互推成功</div>
              </div>
            </div>
            <div class="linea"></div>
            <div class="lineb"></div>
          </div>
        </div>
      </div>
    </pull-to>
  </div>
</template>
<script>
import axios from 'axios'
import PullTo from 'vue-pull-to'
import {MP} from '../../../common/js/loadMap';
export default {
  name: 'example',
  components: {
    PullTo
  },
  data(){
    return {
      lat:"",
      lng:"",
      a:"hybrid",
      page:1,
      arr:{ },
      str:{
        x:"暂无"
      },
      change:"交换",
      change_a:"申请中",
      errNetwork:false,
      token:this.GLOBAL.serverSrc
    }
  },
  created(){
    var that = this;
    //alert(that.$route.query.gps_lng)

   if(that.$route.query.gps_lng!=""&&that.$route.query.gps_lat!=""){
      that.lng=that.$route.query.gps_lng;
      that.lat=that.$route.query.gps_lat;
      that.getData()
    }
  },
  methods: {
    time(nows){
       var now = new Date(nows*1000);
       var year = now.getFullYear();
       var month = now.getMonth() + 1;
       var date = now.getDate();
       return year + "-" + month + "-" + date;
    },
    refresh(loaded) {
      setTimeout(() => {
        this.getData();
      //  this.dataList.reverse();
        loaded('done');
      }, 200);
    },
    refresha(loaded){
      setTimeout(() => {
        this.page++;
        var url=this.token+"/user/buyb?page="+this.page;
        var obj;
        if(this.lng>0 && this.lat>0){
          obj={
            user_id:this.$route.query.userid,
            gps_lng:this.lng,
            gps_lat:this.lat,
            driver_uuid:this.a
          }
        }else{
          obj={
            user_id:this.$route.query.userid
          }
        }
        var thet=this;
        //alert(this.lat)
        this.$axios.post(url,obj).then(response=>{
          response.data.data.forEach((item, index) => {
              thet.arr.push(item)
          })
        })
        .catch(function(error) {
            console.log(error);
        });
        loaded('done');
      }, 200);
    },
    getData(){
      var url=this.token+'/user/buyb';
      var obj={
        user_id:this.$route.query.userid,
        gps_lng:this.lng,
        gps_lat:this.lat,
        driver_uuid:this.a
      }
      //alert(obj.user_id)
      var thet=this;
      this.$axios.post(url,obj).then(response=>{
          thet.arr=response.data.data
          //console.log(thet.arr)
      })
      .catch(function(error) {
          console.log(error);
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.list_boxa{
   width:100%;
   height:100%;
   display:flex;
   justify-content:center;
}
img{ pointer-events: none;vertical-align: sub;}
  .list:nth-last-of-type(1){
    margin-bottom: 0.8rem;
  }
  .list{
    width:3.54rem;
    height:1.2rem;
    background:#FFFFFF;
    border-radius:0.05rem;
    position: relative;
    margin-bottom:0.05rem;
    .haha{
      width:3.54rem;
      height:0.76rem;
      display: inline-block;
      text-decoration: none;
      position: absolute;
      left:0;
      top:0;
      z-index: 5;
    }
    .buy_photo{
      width:0.59rem;
      height:0.59rem;
      position: absolute;
      top:0.15rem;
      left:0.12rem;
      border-radius:0.05rem;
      z-index: 1;
    }
    .box{
      width:2.2rem;
      display:flex;
      align-items: center;
      position: absolute;
      top:0.18rem;
      left:0.81rem;
      z-index: 1;
      .buy_name{
        max-width:0.9rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        height:0.2rem;
        color:#1B1B1B;
        font-size:0.15rem;
        font-weight:bold;
      }
      .buy_occupation{
        color:#636363;
        font-size:0.12rem;
        margin-left:0.05rem;
        z-index: 1;
      }
      .buy_trade{
        height:0.14rem;
        line-height:0.16rem;
        color:#46DCC3;
        font-size:0.1rem;
        background:rgb(227,250,246);
        margin-left:0.07rem;
        z-index: 1;
        .hang{
          padding-top: 0.03rem;
        }
      }
    }
    .buy_time{
      width:1.5rem;
      display:flex;
      justify-content:center;
      color:#FF7928;
      font-size:0.12rem;
      position:absolute;
      top:0.12rem;
      left:2.2rem;
      z-index: 1;
    }

    .buy_company{
      max-width:2.3rem;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      height:0.2rem;
      color:#636363;
      font-size:0.12rem;
      position: absolute;
      top:0.4rem;
      left:0.81rem;
      z-index: 1;
    }
    .buy_people{
      //color:#636363;
      font-size:0.12rem;
      position: absolute;
      top:0.6rem;
      left:0.81rem;
      z-index: 1;
      span{
        color:#46DCC3;
      }
    }
    .buy_juli{
      color:#636363;
      font-size:0.12rem;
      position: absolute;
      top:0.6rem;
      left:2rem;
      z-index: 1;
    }
    .buy_price{
      color:#46DCC3;
      font-size:0.2rem;
      font-weight:bold;
      position: absolute;
      top:0.55rem;
      left:2.9rem;
      z-index: 1;
    }
    .btnn{
      width:100%;
      height:0.32;
      position: absolute;
      top:0.88rem;
      left:0;
      display:flex;
      justify-content: space-between;
      align-items: center;
      .btnna{
        width:50%;
        text-align: center;
        line-height:0.32rem;
        color:#46DCC3;
        font-size:0.14rem;
      }
      .btnnb{
        width:50%;
        text-align: center;
        line-height:0.32rem;
        color:#939393;
        font-size:0.14rem;
      }
    }
    .linea{
      width:3.32rem;
      height:0.005rem;
      background:#EEEEEE;
      position: absolute;
      top:0.88rem;
      left:0.1rem;
    }
    .lineb{
      width:0.01rem;
      height:0.21rem;
      background:#EEEEEE;
      position: absolute;
      top:0.95rem;
      left:1.76rem;
    }
  }
  .list_wu{
    width:3.54rem;
    height:2.2rem;
    background: #FFFFFF;
    border-radius:0.05rem;
    position:relative;
    margin-bottom: 0.05rem;
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    .wu{
      width:100%;
      display:flex;
      justify-content: center;
      align-items: center;
      margin-bottom:0.16rem;
      .bga{
        width:1.6rem;
        height:0.8rem;
      }
    }
    .wu_wz{
      width:100%;
      display:flex;
      flex-wrap:wrap;
      justify-content: center;
      align-items:space-around;
      color:#939393;
      font-size:0.13rem;
      .wz{

        span{
          width:100%;
          display:flex;
          margin-bottom:0.05rem;
          //justify-content:center;
        }
      }
    }
  }
  a{
    text-decoration:none;
  }
</style>
